<template>
	<view class="container">
		<view class="content">
			<view class="header animate__animated animate__fadeInDown">
				<text class="title">老师评分管理</text>
				<text class="subtitle">查看和管理教师评分</text>
			</view>

			<view class="toolbar animate__animated animate__fadeIn">
				<view class="sort-options">
					<text class="sort-label">排序方式：</text>
					<view class="sort-buttons">
						<text 
							class="sort-button" 
							:class="{active: sortBy === 'scoreDesc'}"
							@click="changeSort('scoreDesc')"
						>高分优先</text>
						<text 
							class="sort-button" 
							:class="{active: sortBy === 'scoreAsc'}"
							@click="changeSort('scoreAsc')"
						>低分优先</text>
						<text 
							class="sort-button" 
							:class="{active: sortBy === 'name'}"
							@click="changeSort('name')"
						>姓名排序</text>
					</view>
				</view>
			</view>

			<view class="card animate__animated animate__fadeInUp animate__delay-0.5s">
				<view class="card-header">
					<text class="card-title">评分列表</text>
					<view class="divider"></view>
					<text class="average-score">平均分: {{ averageScore.toFixed(1) }}</text>
				</view>
				<view class="card-body">
					<view 
						v-for="(teacher, index) in sortedTeachers" 
						:key="teacher.teacherId" 
						class="member animate__animated animate__fadeIn"
						:style="{'animation-delay': `${index * 0.1}s`}"
						@click="redirect2(teacher.teacherId, teacher.teacherName)"
					>
						<view class="member-info">
							<view class="avatar" :style="{background: getAvatarColor(index)}">
								{{ teacher.teacherName.charAt(0) }}
							</view>
							<view class="info-content">
								<text class="name">{{ index + 1 }}. {{ teacher.teacherName }}</text>
								<view class="progress-container">
									<view class="progress-labels">
										<text>0</text>
										<text>50</text>
										<text>100</text>
									</view>
									<view class="progress-bar-bg">
										<view 
											class="progress-bar" 
											:style="{
												width: `${Math.min(100, teacher.totalScore)}%`,
												background: getProgressColor(teacher.totalScore)
											}"
										></view>
									</view>
								</view>
							</view>
						</view>
						<view class="score-container">
							<view class="score-badge" :style="{background: getScoreColor(teacher.totalScore)}">
								<text>{{ teacher.totalScore }}分</text>
							</view>
							<!-- <view class="rank-change" v-if="teacher.previousRank !== null">
								<uni-icons 
									:type="teacher.previousRank > index ? 'arrow-up' : 'arrow-down'" 
									size="16" 
									:color="teacher.previousRank > index ? '#52c41a' : '#f5222d'"
								></uni-icons>
								<text>{{ Math.abs(teacher.previousRank - index) }}</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<Spinner ref="spinner" :students="students"></Spinner>
	</view>
</template>

<script>
	import { globalVariable } from '../../configMy.js';
	// import uniIcons from '@/components/uni-icons/uni-icons.vue';
	
	export default {
		
		data() {
			return {
				students: [],
				teachers: [],
				allScores: [],
				sortBy: 'scoreDesc',
				previousTeachers: null
			};
		},
		computed: {
			sortedTeachers() {
				let sorted = [...this.teachers];
				
				// 记录之前的排名用于显示变化
				if (this.previousTeachers === null) {
					this.previousTeachers = sorted.map((t, i) => ({...t, previousRank: i}));
				}
				
				switch(this.sortBy) {
					case 'scoreDesc':
						sorted.sort((a, b) => b.totalScore - a.totalScore);
						break;
					case 'scoreAsc':
						sorted.sort((a, b) => a.totalScore - b.totalScore);
						break;
					case 'name':
						sorted.sort((a, b) => a.teacherName.localeCompare(b.teacherName));
						break;
				}
				
				// 添加排名变化信息
				sorted = sorted.map((teacher, index) => {
					const previousTeacher = this.previousTeachers.find(t => t.teacherId === teacher.teacherId);
					return {
						...teacher,
						previousRank: previousTeacher ? previousTeacher.previousRank : null
					};
				});
				
				return sorted;
			},
			averageScore() {
				if (this.teachers.length === 0) return 0;
				const total = this.teachers.reduce((sum, teacher) => sum + teacher.totalScore, 0);
				return total / this.teachers.length;
			}
		},
		onLoad() {
			this.loadTeacherData();
		},
		methods: {
			loadTeacherData() {
				uni.request({
					url: globalVariable + "/getAllTeacherScore",
					success: (res) => {
						const info = res.data;
						const scores = info.data;
						this.allScores = scores;
						
						const teacherMap = {};
						scores.forEach(score => {
							if (!teacherMap[score.teacherId]) {
								teacherMap[score.teacherId] = {
									teacherId: score.teacherId,
									teacherName: score.teacherName,
									totalScore: 0
								};
							}
							teacherMap[score.teacherId].totalScore += score.score;
						});
						
						this.teachers = Object.values(teacherMap);
						// 初始按高分到低分排序
						this.teachers.sort((a, b) => b.totalScore - a.totalScore);
					}
				});
			},
			changeSort(type) {
				this.previousTeachers = this.sortedTeachers.map((t, i) => ({...t, previousRank: i}));
				this.sortBy = type;
			},
			redirect2(teacherId, teacherName) {
				uni.navigateTo({
					url:"/pages/addTeacherScore/addTeacherScore?teacherName="+teacherName+"&teacherId="+teacherId
				})
			},
			getAvatarColor(index) {
				const colors = [
					'linear-gradient(135deg, #3cbbff, #6a5acd)',
					'linear-gradient(135deg, #ff7eb3, #ff758c)',
					'linear-gradient(135deg, #43e97b, #38f9d7)',
					'linear-gradient(135deg, #ff9a9e, #fad0c4)',
					'linear-gradient(135deg, #a18cd1, #fbc2eb)'
				];
				return colors[index % colors.length];
			},
			getProgressColor(score) {
				if (score >= 80) return '#52c41a';
				if (score >= 50) return '#faad14';
				return '#f5222d';
			},
			getScoreColor(score) {
				if (score >= 80) return 'linear-gradient(135deg, #52c41a, #73d13d)';
				if (score >= 50) return 'linear-gradient(135deg, #faad14, #ffc53d)';
				return 'linear-gradient(135deg, #f5222d, #ff4d4f)';
			}
		}
	};
</script>

<style scoped>
	/* 引入动画库 */
	@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
	
	.container {
		position: relative;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		padding: 20rpx;
	}
	
	.content {
		max-width: 800px;
		margin: 0 auto;
	}
	
	.header {
		text-align: center;
		margin-bottom: 30px;
		color: #2c3e50;
	}
	
	.title {
		font-size: 36px;
		font-weight: 700;
		display: block;
		margin-bottom: 8px;
	}
	
	.subtitle {
		font-size: 16px;
		color: #7f8c8d;
	}
	
	.toolbar {
		margin-bottom: 20px;
		background: rgba(255,255,255,0.9);
		padding: 15px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	}
	
	.sort-options {
		display: flex;
		align-items: center;
	}
	
	.sort-label {
		font-size: 16px;
		color: #666;
		margin-right: 10px;
	}
	
	.sort-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	
	.sort-button {
		padding: 6px 12px;
		border-radius: 20px;
		font-size: 14px;
		background: #f0f2f5;
		color: #666;
		cursor: pointer;
		transition: all 0.3s;
	}
	
	.sort-button.active {
		background: linear-gradient(135deg, #3cbbff, #6a5acd);
		color: white;
		box-shadow: 0 2px 8px rgba(60, 187, 255, 0.3);
	}
	
	.card {
		background: white;
		border-radius: 16px;
		padding: 20px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
		margin-bottom: 24px;
		transition: all 0.3s ease;
	}
	
	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
	}
	
	.card-header {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.card-title {
		font-size: 24px;
		font-weight: 600;
		color: #333;
	}
	
	.divider {
		flex: 1;
		height: 2px;
		background: #eee;
		margin: 0 15px;
	}
	
	.average-score {
		font-size: 16px;
		color: #666;
		background: #f0f2f5;
		padding: 4px 10px;
		border-radius: 12px;
	}
	
	.member {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		margin: 12px 0;
		border-radius: 12px;
		background: white;
		transition: all 0.3s ease;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		border: 1px solid #f0f0f0;
	}
	
	.member:hover {
		background: #fafafa;
		transform: translateX(5px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	}
	
	.member-info {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		font-weight: bold;
		margin-right: 16px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
	
	.info-content {
		flex: 1;
	}
	
	.name {
		font-size: 18px;
		font-weight: 500;
		color: #333;
		margin-bottom: 8px;
		display: block;
	}
	
	.progress-container {
		width: 100%;
	}
	
	.progress-labels {
		display: flex;
		justify-content: space-between;
		margin-bottom: 4px;
		font-size: 12px;
		color: #999;
	}
	
	.progress-bar-bg {
		width: 100%;
		height: 8px;
		background: #f0f0f0;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.progress-bar {
		height: 100%;
		border-radius: 4px;
		transition: width 0.6s ease;
	}
	
	.score-container {
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		justify-content: right;
		margin-left: 15px;
	}
	
	.score-badge {
		color: white;
		padding: 6px 12px;
		border-radius: 20px;
		font-weight: bold;
		font-size: 14px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		min-width: 60px;
		text-align: center;
	}
	
	.rank-change {
		display: flex;
		align-items: center;
		margin-top: 4px;
		font-size: 12px;
	}
	
	/* 响应式调整 */
	@media (max-width: 600px) {
		.content {
			padding: 10rpx;
		}
		
		.title {
			font-size: 28px;
		}
		
		.card {
			padding: 16px;
		}
		
		.sort-options {
			flex-direction: column;
			align-items: flex-start;
		}
		
		.sort-label {
			margin-bottom: 8px;
		}
		
		.member {
			flex-direction: column;
			align-items: flex-start;
		}
		
		.score-container {
			margin-left: 0;
			margin-top: 10px;
			width: 100%;
			/* flex-direction: row;
			justify-content: space-between; */
		}
	}
</style>